<html>
    <head>
        
          <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		  
     </head>
    <body>
        <div id="cart">
          <div >
            <table border="1px" width="50%" height="450px" align="center" cellspacing="0">
                <tr>
                  <th>序号</th>
                  <th>书籍名称</th>
                  <th>出版日期</th>
                  <th>价格</th>
                  <th>购买数量</th>
                  <th>操作</th>
                </tr>
                <tr v-for="(item, index) in books" align="center">
                  <td>{{ index+1 }}</td>
                  <td>{{ item.name }}</td>
                  <td>{{ item.date }}</td>
                  <td>￥{{ item.price }}</td>
                  <td>
                    <button @click="reduce(index)" :disabled="item.count <= 1">-</button>
                    {{ item.count }}
                    <button @click="add(index)">+</button>
                  </td>
                  <td>
                    <button @click="del(index)">移除</button>
                  </td>
                </tr>
            </table>
            <h2 align="center">总价格：￥{{ totalprice  }}</h2>
          </div>
        </div>
    
        <script>
          const vm = new Vue({
            el: '#cart',
            data: {
              books: [
                { id: 1, name: '《java编程思想》', date: '2020-9', price: 98.00, count: 1 },
                { id: 2, name: '《数据分析与数据原理》', date: '2019-2', price: 39.00, count: 1 },
                { id: 3, name: '《Hadoop权威指南》', date: '2019-10', price: 59.00, count: 1 },
                { id: 4, name: '《代码大全》', date: '2018-8', price: 128.00, count: 1 },
              ]
            },
            methods: {
              add(index) {
                this.books[index].count++
              },
              reduce(index) {
                this.books[index].count--
              },
              del(index) {
                this.books.splice(index, 1)
              }
            },
            computed: {
                totalprice() {
                let totalprice = 0;
                for (let i = 0; i < this.books.length; i++) {
                    totalprice += this.books[i].price * this.books[i].count
                };
                return totalprice;
              }
            }
          })
        </script>
      </body>
</html>